<!-- 自定义标准图表 设置百分百宽度 通过平台组件来适配尺寸 可以替换数据以及设置高级属性自定义扩展 详细查看组件示例.txt
  注:如需设置图片存放文件夹名称需应与当前文件名一致(1并在aircim.webpack.build.component.config.js配置需要打包的文件 2.npm run lib_c 执行打包命令  最后的组件会打包在components/grids中)-->
<template>
  <div
    class="grid-box animate__animated"
    :class="dynamicClassName"
    :style="backgroundStyle"
  >
    <!-- 设置交互方法 -->
    <div class="pie-chart">
      <div
        class="grid-charts"
        ref="chartsRef"
        @click="clickFn()"
        @dblclick="dblclickFn()"
        @mouseenter="mouseenterFn()"
        @mouseleave="mouseleaveFn()"
      ></div>
      <ul class="legend-list">
        <li
          v-for="(item, index) in echartdata"
          @mouseenter="hover(index)"
          :class="{ active: current == index }"
        >
          <p class="legend-name">
            <i
              class="legend-icon"
              :style="'background:' + echartsConfigData.chartDataColor1[index]"
            ></i>
            <span>{{ item.name }}</span>
            <span class="num"
              ><em>{{ item.value }}</em
              >个</span
            >
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
//引入echarts图表
import echarts from "echarts";
//引入封装方法
import encapsulation from "../../utils/aircimGird";

export default {
  //混入封装方法
  mixins: [encapsulation],
  props:['echartdata'],
  data() {
    return {
      current: 0,

      //图表样式  (样式可选配 这个主要是适配平台做细微属性修改 如不需要 只保留这个 echartsConfigData对象 里面字段清空(echarts图表中正常书写颜色或者数字属性)  并且在refreshConfig分配属性的对应字段也清除或者注释)
      echartsConfigData: {
        //标题样式
        textStyle: {
          color: "#94B2CF",
          fontSize: 14,
        },
        // x显示
        xShow: true,
        // x颜色
        xColor: "#94B2CF",
        // x字体
        xWeight: "14",
        // y显示
        yShow: true,
        // y颜色
        yColor: "#94B2CF",
        // y字体
        yWeight: "14",
        // 图例显示
        legendShow: false,
        // 图例颜色
        legendColor: "#94B2CF",
        // 图例字体
        legendWeight: "14",
        // 图表底板颜色
        linerColor: "rgba(255,255,255,0)",
        // 是否隐藏底框
        hideBottomFrame: false,
        //定义线条颜色 (可忽略不用)
        chartType: "折线图-1",
        chartDataColor1: [
          "#6FCDD8",
          "#9778E6",
          "#8FB4F0",
          "#8EE2C5",
          "#F4BA8C",
          "#5B74EE",
        ],
        chartDataColor2: [
          "#9EDDE4",
          "#CDB9F5",
          "#AECAF7",
          "#BAF9E4",
          "#F8D5B9",
          "#8595E3",
        ],
        //定义线条颜色 (可忽略不用)
        chartDataShadowColor1: "rgba(83, 255, 189,.3)",
        //单位
        yUnit: "件",
      },
      //监听尺寸变化
      resizeObserver: null,
      //图表实例
      mychart: null,
    };
  },
  methods: {
    hover(index) {
      this.current = index;
      // 取消之前高亮的图形
      this.mychart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
      });
      // 高亮当前图形
      this.mychart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: index,
      });
      // 显示 tooltip
      this.mychart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: index,
      });
    },
    myEcharts() {
      var that = this;
      this.mychart = echarts.init(this.$refs.chartsRef);
      const pieData = [];
      const pieData2 = [];

      this.echartdata.map((item, i) => {
        // 最外圈
        pieData.push({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: this.echartsConfigData.chartDataColor1[i] },
              { offset: 1, color: this.echartsConfigData.chartDataColor2[i] },
            ]),
          },
        });
        // 外圈阴影
        pieData2.push({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              { offset: 0, color: this.echartsConfigData.chartDataColor1[i] },
              { offset: 1, color: this.echartsConfigData.chartDataColor2[i] },
            ]),
            opacity: 1,
          },
        });
      });

      let option = {
        tooltip: {
          show: false,
          trigger: "item",
          formatter: function(params) {
            return `${params.name} <br/> ${params.value}%`;
          },
          confine: true,
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["54%", "75%"],
            avoidLabelOverlap: false,
            label: {
                normal: {
                  show: false,
                  formatter: function(params) {
                    return `{a|${params.name}}\n{c|${params.percent}}{b|%}`;
                  },
                  rich: {
                    a: {
                      align: "center",
                      color: "#fff",
                      fontSize: 14,
                    },
                    b: {
                      color: "#96BEE0",
                      fontSize: 14,
                      lineHeight: 14,
                    },
                    c: {
                      color: "#fff",
                      fontSize: 20,
                      lineHeight: 25,
                      fontFamily: "D-DIN",
                    },
                  }
                  ,textStyle: {
                    fontSize: 14,
                    fontWeight: "bold",
                  },
                  position: "center",
                },
            },
                emphasis: {
                  label: {
                    show: true
                  }
                },
            labelLine: {
              show: true,
            },
            data: pieData,
          },
          {
            // 内圈
            type: "pie",
            silent: true,
            center: ["50%", "50%"],
            radius: ["50%", "55%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: pieData2,
          },
        ],
      };
      this.mychart.setOption(option);
      this.mychart.on("mouseover", function(e) {
        that.current = e.dataIndex;
      });
      this.mychart.resize();
      // 默认高亮第1个
      this.hover(0);
    },

    //最后如果需要上传可视化能力平台 填写的图表内容 以及 图表样式 应如
    //图表内容: {"echartdata":{"title":"课时统计TEST","legendData":["课时"],"yData":[23,60,20,36,23,85],"xData":["2019-01 ","2019-02 ","2019-03 ","2019-04 ","2019-05 ","2019-06"]}}
    //图表样式: {"xShow":true,"xColor":"#fff","xWeight":24,"yShow":true,"yColor":"#fff","yWeight":24,"legendShow":true,"legendColor":"#fff","legendWeight":18,"chartType":"折线图-1","chartDataColor1":"#A9F387","textStyle":{"color":"#fff","fontSize":32},"linerColor":"rgba(255,255,255,0)","hideBottomFrame":false}

    // 刷新数据源
    refreshData() {
      this.myEcharts();
    },
    // 初始化
    initGrid() {
      this.myEcharts();
    },
    // 样式修改方法
    refreshConfig(val) {
      const {
        xShow,
        yShow,
        legendShow,
        xColor,
        yColor,
        legendColor,
        legendWeight,
        xWeight,
        yWeight,
        chartDataColor1,
        textStyle,
        linerColor,
        hideBottomFrame,
      } = val;
      this.echartsConfigData.xShow = xShow;
      this.echartsConfigData.yShow = yShow;
      this.echartsConfigData.legendShow = legendShow;
      this.echartsConfigData.xColor = xColor;
      this.echartsConfigData.yColor = yColor;
      this.echartsConfigData.legendColor = legendColor;
      this.echartsConfigData.legendWeight = legendWeight;
      this.echartsConfigData.xWeight = xWeight;
      this.echartsConfigData.yWeight = yWeight;
      this.echartsConfigData.chartDataColor1 = chartDataColor1;

      this.echartsConfigData.textStyle = textStyle;
      this.echartsConfigData.linerColor = linerColor;
      this.echartsConfigData.hideBottomFrame = hideBottomFrame;
    },

    // 监听盒子变化
    listenChangeFn() {
      // 添加 resize 事件监听器
      // 获取目标 div 元素
      const targetDiv = this.$refs.chartsRef;

      // 创建 ResizeObserver 实例
      this.resizeObserver = new ResizeObserver((entries) => {
        // 当目标 div 大小发生变化时，触发回调函数
        for (const entry of entries) {
          const { width, height } = entry.contentRect;
          this.mychart.resize(); //图表自适应方法
        }
      });

      // 监听目标 div 元素
      this.resizeObserver.observe(targetDiv);
    },
  },
  computed: {
    //设置套系边框(根据主题切换底色边框样式) 以及设置图表背景颜色
    backgroundStyle() {
      const { hideBottomFrame, linerColor } = this.echartsConfigData;
      let styleObject = {
        "background-color": linerColor,
        padding: "0!important",
      };
      // 如果 hideBottomFrame 不为 true，则添加 background-image
      if (!hideBottomFrame) {
        styleObject["background-image"] = "none";
      }
      return styleObject;
    },
  },
  watch: {
    echartdata: {
      deep: true,
      handler(val) {
        console.log('123',val)
        this.refreshData();
      },
    },
  },
  mounted() {
    this.myEcharts(); //图表初始化
    this.listenChangeFn(); //监听盒子变化
  },
  // 销毁监听
  beforeDestroy() {
    // 组件销毁前停止监听
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.requestTime != null) {
      clearInterval(this.requestTime);
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../static/assets/common.scss";
</style>
<style lang="scss" scoped>
.grid-box {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .grid-charts {
    width: 50%;
    height: 100%;
  }
}
.pie-chart {
  display: flex;
  width: 100%;
  height: 100%;
}
.legend-list {
  width: calc(50% + 30px);
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  .active > .legend-name,
  li:hover .legend-name {
    background-image: url(../../static/assets/PieChart/legend-bg.png);
    background-size: auto 26px;
    background-repeat: no-repeat;
  }
  .legend-name {
    display: flex;
    align-items: center;
    padding-left: 29px;
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    cursor: pointer;
    .legend-icon {
      margin-right: 12px;
      width: 10px;
      height: 10px;
      border-radius: 4px;
      background: #f2b073;
    }
    span {
      //flex: 1;
      width: 90px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    em {
      color: #fff;
      font-size: 18px;
      font-family: D-DIN;
      font-weight: 700;
    }
  }
}
</style>
<style lang="scss">
.tooltip-wrap {
  em {
    padding-right: 3px;
    font-size: 24px;
    font-style: normal;
    font-family: D-DIN;
  }

  .tooltip-value {
    margin-top: 6px;
    display: flex;
    align-items: center;
  }

  .tooltip-icon {
    margin-right: 5px;
    width: 11px;
    height: 11px;
    border-radius: 100%;
  }
}
</style>
